<div id="addBorrowModal" class="fixed inset-0 bg-gray-900 bg-opacity-60 backdrop-blur-sm flex items-center justify-center hidden z-50">
    <div class="bg-white p-8 rounded-xl shadow-2xl max-w-3xl w-full mx-4 border border-gray-100">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 border-gray-100">新增借阅记录</h2>
        <form id="addBorrowForm" action="AddBorrow.php" method="POST" class="space-y-6">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="borrowUserId" class="block text-sm font-semibold text-gray-700 mb-2">借阅用户 <span class="text-red-500">*</span></label>
                    <select id="borrowUserId" name="user_id"
                            class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 appearance-none">
                        <option value="">请选择用户</option>
                        <?php foreach ($users as $user): ?>
                            <option value="<?= $user['id'] ?>"><?= htmlspecialchars($user['name']) ?>（<?= htmlspecialchars($user['username']) ?>）</option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label for="borrowBookId" class="block text-sm font-semibold text-gray-700 mb-2">借阅图书 <span class="text-red-500">*</span></label>
                    <select id="borrowBookId" name="book_id"
                            class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 appearance-none">
                        <option value="">请选择图书</option>
                        <?php foreach ($books as $book): ?>
                            <option value="<?= $book['id'] ?>"><?= htmlspecialchars($book['title']) ?>（ISBN: <?= htmlspecialchars($book['isbn']) ?>）</option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="borrowTime" class="block text-sm font-semibold text-gray-700 mb-2">借阅时间</label>
                    <input type="datetime-local" id="borrowTime" name="borrow_time"
                           value="<?= date('Y-m-d\TH:i') ?>"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
            </div>

            <!-- 按钮行 -->
            <div class="flex justify-end gap-4 pt-4 border-t border-gray-100">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-sm">
                    确认添加
                </button>
                <button type="button" id="closeAddBorrowModal" class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    取消
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const addBtn = document.getElementById('addBorrowBtn');
        const modal = document.getElementById('addBorrowModal');
        const closeBtn = document.getElementById('closeAddBorrowModal');

        // 显示模态框
        addBtn && addBtn.addEventListener('click', () => modal.classList.remove('hidden'));

        // 关闭模态框
        closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.classList.add('hidden');
        });

        // 表单提交验证
        document.getElementById('addBorrowForm').addEventListener('submit', (e) => {
            const userId = document.getElementById('borrowUserId').value;
            const bookId = document.getElementById('borrowBookId').value;

            if (!userId) {
                alert('请选择借阅用户');
                e.preventDefault();
                return;
            }
            if (!bookId) {
                alert('请选择借阅图书');
                e.preventDefault();
                return;
            }
        });
    });
</script>
